<template>
	<view class="center column">
		<!-- mode="widthFix" 宽度比例不变 -->
		<image v-for="(url, index) in detailUrls" :key="index" :src="url" @load="load" lazy-load mode="widthFix"></image>
		<image v-if="loading" class="loading" src="/static/images/loading.gif"></image>
		<!-- 写相对路径，真机上不显示 -->
		<text v-else class="footer-text">已经到达底部，没有更多内容了</text>
	</view>
</template>

<script>
export default {
	props: {
		detailUrls: {
			type: Array,
			default: () => ['https://img.alicdn.com/imgextra/i2/3603079088/O1CN01V8VO2y2H0M5Bx33L3_!!3603079088.jpg']
		}
	},

	data() {
		return {
			loading: true //图片是否加载中
		};
	},

	methods: {
		load() {
			//加载完成
			this.loading = false;
		}
	}
};
</script>

<style>
image {
	width: 100%;
}

.loading {
	height: 90rpx;
	width: 90rpx;
	margin-top: 50rpx;
}

.footer-text {
	font-size: 30rpx;
	color: #777777;
	margin: 20rpx 0;
}
</style>
